<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8" />
<style type="text/css">
html {
	height: 100%
}
body {
	height: 100%;
	margin: 0;
	padding: 10
}
#map_canvas {
	height: 90%;
	width: 98%;
	border: 1px solid black;
}
</style>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD3xl5q7sL1u7amk2C_bjQeuF1epVtWQyg&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
<script type="text/javascript">
	var map;
	var geocoder;
	var director;
	var directionsDisplay;
	var elevator;
	var infowindow;
	var centerLatLng;
	var defaultMapOptions;
	var markerMgr;
	var marker;
	function initialize(options) {
		geocoder = new google.maps.Geocoder();
		director = new google.maps.DirectionsService();
		directionsDisplay = new google.maps.DirectionsRenderer();
		elevator = new google.maps.ElevationService();
		infowindow = new google.maps.InfoWindow();		
		centerLatLng = new google.maps.LatLng(39.904214, 116.407413);
		defaultMapOptions = {
			zoom : 11,
			center : centerLatLng,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			mapTypeControl : true,
			mapTypeControlOptions : { 
				mapTypeIds : [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ]
			},
			scaleControl : true
		};
		options =  options || defaultMapOptions;
		map = new google.maps.Map(document.getElementById("map_canvas"),
				options);
		directionsDisplay.setMap(map);
		markerMgr = new MarkerManager(map, {trackMarkers: true, maxZoom: 15});
		marker = new google.maps.Marker({
			position : centerLatLng,
			map : map,
			title : "Beijing"
		});
		google.maps.event.addListener(marker, 'click', function(event) {
			map.setCenter(event.latLng);
			map.setZoom(11);
		});
		google.maps.event.addListener(map, 'click', handleClick);
	}
	function handleGeocode(address) {
		if(!address){
			address = document.getElementById("address").value;
		}
		geocoder.geocode({
			'address' : address
		}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				document.getElementById('latlng').value = results[0].geometry.location;
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map : map,
					position : results[0].geometry.location
				});
			} else {
				alert("Geocode was not successful for the following reason: "
						+ status);
			}
		});
	}
	function handleCalcRoute() {
		var start = document.getElementById("start").value;
		var end = document.getElementById("end").value;
		var request = {
			origin : start,
			destination : end,
			travelMode : google.maps.DirectionsTravelMode.DRIVING
		};
		director.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
			}
		});
	}
	function handleClick(event) {
		document.getElementById("latlng").value = event.latLng;
		/*var locations = [];
		locations.push(event.latLng);
		var positionalRequest = {
			'locations' : locations
		}
		elevator.getElevationForLocations(positionalRequest, function(results,
				status) {
			if (status == google.maps.ElevationStatus.OK) {
				if (results[0]) {
					infowindow.setContent("Elevation : " + results[0].elevation
							+ " meters." + event.latLng);
					infowindow.setPosition(event.latLng);
					infowindow.open(map);
				} else {
					alert("No results found");
				}
			} else {
				alert("Elevation service failed due to: " + status);
			}
		});*/
	}
	function ShowPositions(positionArray, icon) {
		map.setZoom(11);
		for(var i=0; i<positionArray.length; i++){
			ShowPosition(positionArray[i], icon);
		}
	}
	function ShowPosition(position, icon) {
		icon = icon || 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
		if(!position.address) { position.address = '' };
		if(!position.desc) { position.desc = '' };
		var title = position.address + ':' + position.name + ':' + position.desc;
		var marker = new google.maps.Marker({
			map : map,
			icon : icon,
			position : new google.maps.LatLng(position.lat, position.lng),
			title : title
		});
	}
	function ShowCitiesVisited() {
		ShowPositions(citiesVisited, 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
		ShowPositions(citiesVisited2, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png');
		map.setZoom(7);
	}	
</script>
</head>
<body onload="initialize()">
	<div>
		<span style="border: 1px;">
			<input id="address" type="textbox" value="">
			<input type="button" value="Geocode" onclick="handleGeocode()">
			<input id="latlng" type="textbox" value=""> 
		</span>
		<span style="border: 1px;">
			<input type="button" value="CitiesVisited" onclick="ShowCitiesVisited()">
		</span>
		<span>
			<b>Start: </b>
			<select id="start" onchange="handleCalcRoute();">
				<option value="beijing beijing">Beijing</option>
				<option value="tianjin, tianjin">Tianjin</option>
			</select> 
			<b>End: </b>
			<select id="end" onchange="handleCalcRoute();">
				<option value="beijing beijing">Beijing</option>
				<option value="tianjin, tianjin">Tianjin</option>
			</select>
		</span>
	</div>
	<div style="width: 100%; height: 1%; margin: 0 auto;">
	</div>
	<div id="map_canvas" style="margin: 0 auto;"></div>
	<div id="elevation_chart" style="width: 640px; height: 200px;"></div>
	<div hidden="true">		
	</div>
</body>
</html>